const HtmlWebpackPlugin = require('html-webpack-plugin')
/**
 * 开发环境下的性能优化
 * HMR：hot module replacement 热模块替换
 * 作用：一个模块发生变化，只会重新打包这一模块（而不是打包所有模块）
 *      极大的提升构建速度
 *      
 *      样式文件：可以使用HMR功能，因为style-loader内部实现了
 *      js文件： 默认不能使用HMR功能 --> 需要修改js代码，添加支持HMR功能的代码
 *              注意：HMR功能对js的处理，只能处理非入口js文件的其他文件。
 *      HTML文件： 默认不能使用HMR功能，也不用做HMR功能（SPA单页面应用程序）
 *                解决： 修改entry入口，将html文件引入
 *                entry: ['./src/app.js', './src.index.html']
 * */

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'build.js',
    path: `${__dirname}/dist`
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 处理图片
        // 存在问题: 处理不了HTML中的图片
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          //小于80kb时当成base64处理(需要file-loader配合)
          limit: 8 * 10 * 1024,
          // 给图片重命名，取hash值前8位并保留原后缀名
          name: '[hash:8].[ext]'
        }
      },
      {
        // 负责处理HTML中的图片
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        // 处理其他资源文件
        // test: /\.(eot|svg|ttf|woff|woff2)/,
        exclude: /\.(css|less|js|json|html|jpg|png|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:8].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',
  // 热加载，特点：只会在内存中加载，不会有任何输出
  devServer: {
    host: "localhost",
    port: 3000,
    // 启动gzip压缩
    compress: true,
    // 自动打开浏览器
    open: true,
    hot: true
  },
  /**
  * source-map：一种提供源代码到构建后代码映射技术（如果构建后代码出错了，通过映射可以追踪源代码错误）
  * 一般开发环境选择：eval-source-map/eval-cheap-module-souce-map
  * 生产环境选择：source-map/cheap-module-souce-map
  *              如果想隐藏源代码的话可以选择：
  *              nosources-source-map 全部隐藏
  *              hidden-source-map 只隐藏源代码，会提示构建后代码错误信息
  */
  devtool: 'eval-source-map'
}